<template>
   <div>
      <el-row :gutter="20">
         <el-col :span="6" v-for="item in 4" v-if="!panelsList.length">
            <el-skeleton style=" width: 100%;" :loading="true" :animated="true">
               <template #template>
                  <el-card style="max-width: 480px;height: 200px;">
                     <template #header>
                        <div class="card-header">
                           <el-skeleton-item variant="text" style="width: 60px;" />
                           <el-skeleton-item variant="text" style="width: 20px;" />
                        </div>
                     </template>
                     <el-skeleton-item variant="h3" style="width: 70px; height: 30px;" />
                     <template #footer>
                        <div class="card-footer">
                           <el-skeleton-item variant="text" style="width: 60px;" />
                           <el-skeleton-item variant="text" style="width: 30px;" />
                        </div>
                     </template>
                  </el-card>
               </template>
            </el-skeleton>
         </el-col>

         <el-col :span="6" v-for="item in panelsList" v-else>
            <el-card style="max-width: 300px" shadow="hover" class="border-0">
               <template #header>
                  <div class="card-header">
                     <div>{{ item.title }}</div>
                     <div>
                        <el-tag :type="item.unitColor || 'primary'" effect="plain">
                           {{ item.unit }}
                        </el-tag>
                     </div>
                  </div>
               </template>
               <div class="text-gray-500 text-3xl font-bold">
                  <count-to :num="item.value"></count-to>
               </div>
               <template #footer>
                  <div class="card-footer">
                     <div class="text-gray-400 font-bold">{{ item.title }}</div>
                     <div class="text-gray-400 font-bold">{{ item.subValue }}</div>
                  </div>
               </template>
            </el-card>
         </el-col>
      </el-row>
      <index-nav></index-nav>
      <el-row :gutter="20" class="mt-5">
         <el-col :span="12" :offset="0">
            <index-chart v-permission="['getStatistics3,GET']"></index-chart>
         </el-col>
         <el-col :span="12" :offset="0">
            <index-notice :itemList="itemList" :titleLeft="titleLeft" :titleRight="titleRight"></index-notice>
            <index-notice class="mt-2" :itemList="itemList2" :titleLeft="titleLeft2"
               :titleRight="titleRight2"></index-notice>
         </el-col>
      </el-row>


   </div>
</template>

<script setup>
import { useInfoStore } from '../store';
import { staticOne, staticTwo } from '../api/static';
import { ref, onMounted } from 'vue';
import IndexNav from '../components/IndexNav.vue';
import countTo from '../components/count-to.vue';
import IndexChart from '../components/IndexChart.vue';
import indexNotice from '../components/index-notice.vue';


const userStore = useInfoStore();
const panelsList = ref([]);
const itemList = ref([]);
const titleLeft = ref('店铺及商品提示');
const titleRight = ref('店铺及商品提示');
const itemList2 = ref([]);
const titleLeft2 = ref('交易提示');
const titleRight2 = ref('需要立即处理的交易订单');
/** 获取后台首页统计1数据 */
const getStaticOne = () => {
   staticOne().then(res => {
      panelsList.value = res.panels;
   })
}

/**获取后台首页统计2数据 */
const getStaticTwo = () => {
   staticTwo().then(({ goods, order }) => {
      console.log('打印统计数据2', goods);
      itemList.value = goods;
      itemList2.value = order;
   })
}
onMounted(() => {
   getStaticOne();
   getStaticTwo();
})


</script>

<style lang="scss" scoped>
.card-header {
   @apply flex justify-between;
}

.card-footer {
   @apply flex justify-between;
}
</style>